<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Pure HTML and CSS Accordion</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<ul class="accordion">
  <li class="accordion-item">
    <input id="s1" class="hide" type="checkbox">
    <label for="s1"class="accordion-label">First</label>
    <ul class="accordion-child">
      <li>
        <label>
          <input type="checkbox"> Item 1
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox"> Item 2
        </label>
      </li>
   </ul>
  </li>
  <li class="accordion-item">
    <input id="s2" class="hide" type="checkbox" checked>
    <label for="s2" class="accordion-label">Second</label>
    <p class="accordion-child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis ultrices nunc. Suspendisse a magna purus. In hac habitasse platea dictumst. Nullam sed nisl quis sem dignissim luctus. Etiam luctus mauris nulla, et efficitur massa efficitur ac.</p>
  </li>
</ul>
<!-- partial -->
  
</body>
</html>
